<template>
    <div class="website_help_box displayBox">
        <LargeScreenView style=" height: 200px">
            <slot>帮助中心</slot>
        </LargeScreenView>
        <div class="website_help_content">

            <div class="website_help_choose">
                <span :class="{'website_help_choose_ed':choose===index}" @click="choose=index"
                      v-for="(item,index) in module">{{ item }}</span>
            </div>
            <div>
                <Problems v-if="choose===0"></Problems>
                <JoinUs v-else-if="choose===1"></JoinUs>
                <Feedback v-else></Feedback>
            </div>
        </div>


    </div>
</template>

<script setup>
import LargeScreenView from "@/components/publicComponent/LargeScreenView.vue";
import JoinUs from "@/components/websiteHelp/JoinUs.vue";
import {onMounted, ref} from "vue";
import Problems from "@/components/websiteHelp/Problems.vue";
import Feedback from "@/components/websiteHelp/Feedback.vue";
import router from "@/router/index.js";

//显示哪一个模块
const choose = ref(0);
//内容列表数据
const module = ref(["常见问题", "加入我们", "问题反馈"]);

onMounted(()=>{
    if(router.currentRoute.value.query.choose){
        choose.value = parseInt(router.currentRoute.value.query.choose);
    }
})

</script>

<style scoped>
.website_help_box{
    margin-bottom: 200px;
    min-height: 700px;
}
.website_help_content {
    width: 1000px;
    margin: auto;
}

.website_help_choose {
    width: 100%;
    text-align: center;
    margin: auto;
}

.website_help_choose span {
    display: inline-block;
    color: #606162;
    font-size: 17px;
    margin: 10px;
    padding: 5px 0;
    cursor: pointer;
    border-radius: 3px;
}

.website_help_choose span:hover {
    color: #6da6e1;
}

.website_help_choose .website_help_choose_ed {
    border-bottom: 2px solid #6da6e1;
    color: #6da6e1;
}
</style>